import React, { Component } from 'react';
import { connect } from 'dva';
import { message, Modal, Pagination, Popconfirm, Button } from 'antd';
import styles from './../Users.css';
import moment from 'moment';
import Factory from '../../factory';
import numeral from 'numeral';
import * as datetime from '../../../utils/datetime'
import dataEditCreate from '../../addons/DataEdit'
import dataTableCreate from '../../addons/DataTable'
import * as compDiviService from '../../../services/AccountDivi';
import * as menuService from '../../../services/menus';
import * as common from '../../../utils/common';
import COMP_ACCO_ACBL from './COMP_ACCO_ACBL'

const daoName = "COMP_ACCO";
const ButtonGroup = Button.Group;

const renderNumber = (num) => {
  let value = ''
  if (num) {
    value = numeral(num).format('0,0')
  }
  return value
};

const renderNumber2 = (num) => {
  let value = ''
  if (num) {
    value = numeral(num).format('0.00%')
  }
  return value
};

const columns = [
  { title: '是否原生', width: 120, sorter: true, dataIndex: 'ISYS', key: 'ISYS', dispaly: true, filter: true },
  { title: '导入标识', width: 120, sorter: true, dataIndex: 'ISDR', key: 'ISDR', dispaly: true, filter: true },
  { title: '是否核验(原/派)', width: 160, sorter: true, dataIndex: 'ISYSPS', key: 'ISYSPS', dispaly: true, filter: true },
  { title: '客户名称', width: 250, sorter: true, dataIndex: 'KHMC', key: 'KHMC', dispaly: true, filter: true },
  { title: '组织机构代码', width: 140, sorter: true, dataIndex: 'ZZJGDM', key: 'ZZJGDM', dispaly: true, filter: true },
  { title: '科目', width: 150, sorter: true, key: 'KM', caption: 'KM', dispaly: true, filter: true, nowrap: true },
  { title: '账户', width: 220, sorter: true, dataIndex: 'ZH', key: 'ZH', dispaly: true, filter: true },
  { title: '币种', width: 100, sorter: true, dataIndex: 'BZ', key: 'BZ', dispaly: true, filter: true },
  { title: '当前余额', width: 120, sorter: true, dataIndex: 'DQYE', key: 'DQYE', dispaly: true, filter: true },
  { title: '客户贷款余额', width: 180, sorter: true, dataIndex: 'DKYE', key: 'DKYE', dispaly: true, filter: true },
  { title: '开户机构', width: 120, sorter: true, dataIndex: 'KHJG', key: 'KHJG', dispaly: true, filter: true },
  { title: '开户日期', width: 120, sorter: true, key: 'KHRQ', caption: "KHRQ", dispaly: true, filter: true, render: data => datetime.format(data.KHRQ, "yyyy-MM-dd") },
  { title: '起息日', width: 100, sorter: true, key: 'QXR', caption: "QXR", dispaly: true, filter: true, render: data => datetime.format(data.QXR, "yyyy-MM-dd") },
  { title: '到期日', width: 100, sorter: true, key: 'DQR', caption: "DQR", dispaly: true, filter: true, render: data => datetime.format(data.DQR, "yyyy-MM-dd") },
  { title: '存期', width: 100, sorter: true, dataIndex: 'CQ', key: 'CQ', dispaly: true, filter: true },
  { title: '利率', width: 100, sorter: true, dataIndex: 'INRT', key: 'INRT', dispaly: true, filter: true },
  { title: '开户日均', width: 120, sorter: true, dataIndex: 'KHRJ', key: 'KHRJ', dispaly: true, filter: true },
  { title: '工号1', width: 100, sorter: false, dataIndex: 'EMNO1', key: 'EMNO1', dispaly: true, filter: true },
  { title: '姓名1', width: 120, sorter: false, dataIndex: 'EMNM1', key: 'EMNM1', dispaly: true, filter: true },
  { title: '部门1', width: 140, sorter: false, dataIndex: 'UTNM1', key: 'UTNM1', dispaly: true, filter: true },
  { title: '占比1', width: 100, sorter: false, className: "column-money", caption: 'DSVL1', render: data => renderNumber2(data.DSVL1), key: 'DSVL1', dispaly: true, filter: true },
  { title: '工号2', width: 100, sorter: false, dataIndex: 'EMNO2', key: 'EMNO2', dispaly: true, filter: true },
  { title: '姓名2', width: 120, sorter: false, dataIndex: 'EMNM2', key: 'EMNM2', dispaly: true, filter: true },
  { title: '部门2', width: 140, sorter: false, dataIndex: 'UTNM2', key: 'UTNM2', dispaly: true, filter: true },
  { title: '占比2', width: 100, sorter: false, className: "column-money", caption: 'DSVL2', render: data => renderNumber2(data.DSVL2), key: 'DSVL2', dispaly: true, filter: true },
  { title: '工号3', width: 100, sorter: false, dataIndex: 'EMNO3', key: 'EMNO3', dispaly: true, filter: true },
  { title: '姓名3', width: 120, sorter: false, dataIndex: 'EMNM3', key: 'EMNM3', dispaly: true, filter: true },
  { title: '部门3', width: 140, sorter: false, dataIndex: 'UTNM3', key: 'UTNM3', dispaly: true, filter: true },
  { title: '占比3', width: 100, sorter: false, className: "column-money", caption: 'DSVL3', render: data => renderNumber2(data.DSVL3), key: 'DSVL3', dispaly: true, filter: true },
  { title: '工号4', width: 100, sorter: false, dataIndex: 'EMNO4', key: 'EMNO4', dispaly: true, filter: true },
  { title: '姓名4', width: 120, sorter: false, dataIndex: 'EMNM4', key: 'EMNM4', dispaly: true, filter: true },
  { title: '部门4', width: 140, sorter: false, dataIndex: 'UTNM4', key: 'UTNM4', dispaly: true, filter: true },
  { title: '占比4', width: 100, sorter: false, className: "column-money", caption: 'DSVL4', render: data => renderNumber2(data.DSVL4), key: 'DSVL4', dispaly: true, filter: true },
  { title: '工号5', width: 100, sorter: false, dataIndex: 'EMNO5', key: 'EMNO5', dispaly: true, filter: true },
  { title: '姓名5', width: 120, sorter: false, dataIndex: 'EMNM5', key: 'EMNM5', dispaly: true, filter: true },
  { title: '部门5', width: 140, sorter: false, dataIndex: 'UTNM5', key: 'UTNM5', dispaly: true, filter: true },
  { title: '占比5', width: 100, sorter: false, className: "column-money", caption: 'DSVL5', render: data => renderNumber2(data.DSVL5), key: 'DSVL5', dispaly: true, filter: true },
];
const controls = [
  { name: 'ISYS', required: true, type: 'text', label: '是否原生', grid: 12 / 24 },
  { name: 'KHMC', required: true, type: 'text', label: '客户名称', grid: 12 / 24 },
  { name: 'ISYSPS', required: true, type: 'text', label: '是否核验(原/派)', grid: 12 / 24 },
  { name: 'ISDR', required: true, type: 'text', label: '导入标识', grid: 12 / 24 },
  { name: 'ZZJGDM', required: true, type: 'text', label: '组织机构代码', grid: 12 / 24 },
  { name: 'ZH', required: true, type: 'text', label: '账户', grid: 12 / 24 },
  { name: 'KHJG', required: true, type: 'text', label: '开户机构', grid: 12 / 24 },
  { name: 'KM', required: true, type: 'text', label: '科目', grid: 12 / 24 },
  { name: 'KHRQ', required: true, type: 'date', label: '开户日期', grid: 12 / 24 },
  { name: 'QXR', required: true, type: 'date', label: '起息日', grid: 12 / 24 },
  { name: 'DQR', required: true, type: 'date', label: '到期日', grid: 12 / 24 },
  { name: 'CQ', required: true, type: 'text', label: '存期', grid: 12 / 24 },
  { name: 'BZ', required: true, type: 'text', label: '币种', grid: 12 / 24 },
  { name: 'INRT', required: true, type: 'number', label: '利率', grid: 12 / 24 },
  { name: 'DKYE', required: true, type: 'number', label: '客户贷款余额', grid: 12 / 24 },
  { name: 'DQYE', required: true, type: 'number', label: '当前余额', grid: 12 / 24 },
  { name: 'KHRJ', required: true, type: 'number', label: '开户日均', grid: 12 / 24 },
  { name: 'EMNO1', required: true, type: 'text', label: '工号1', grid: 12 / 24 },
  { name: 'EMNM1', required: true, type: 'text', label: '姓名1', grid: 12 / 24 },
  { name: 'UTNM1', required: true, type: 'text', label: '部门1', grid: 12 / 24 },
  { name: 'DSVL1', required: true, type: 'number', label: '占比1', grid: 12 / 24 },
  { name: 'EMNO2', required: true, type: 'text', label: '工号2', grid: 12 / 24 },
  { name: 'EMNM2', required: true, type: 'text', label: '姓名2', grid: 12 / 24 },
  { name: 'UTNM2', required: true, type: 'text', label: '部门2', grid: 12 / 24 },
  { name: 'DSVL2', required: true, type: 'number', label: '占比2', grid: 12 / 24 },
  { name: 'EMNO3', required: true, type: 'text', label: '工号3', grid: 12 / 24 },
  { name: 'EMNM3', required: true, type: 'text', label: '姓名3', grid: 12 / 24 },
  { name: 'UTNM3', required: true, type: 'text', label: '部门3', grid: 12 / 24 },
  { name: 'DSVL3', required: true, type: 'number', label: '占比3', grid: 12 / 24 },
  { name: 'EMNO4', required: true, type: 'text', label: '工号4', grid: 12 / 24 },
  { name: 'EMNM4', required: true, type: 'text', label: '姓名4', grid: 12 / 24 },
  { name: 'UTNM4', required: true, type: 'text', label: '部门4', grid: 12 / 24 },
  { name: 'DSVL4', required: true, type: 'number', label: '占比4', grid: 12 / 24 },
  { name: 'EMNO5', required: true, type: 'text', label: '工号5', grid: 12 / 24 },
  { name: 'EMNM5', required: true, type: 'text', label: '姓名5', grid: 12 / 24 },
  { name: 'UTNM5', required: true, type: 'text', label: '部门5', grid: 12 / 24 },
  { name: 'DSVL5', required: true, type: 'number', label: '占比5', grid: 12 / 24 },
];

const EditFrom = dataEditCreate(daoName);
const DataTable = dataTableCreate(daoName);
/*对公存款 */
class COMP_ACCO extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataChange: false,
      diviList: [],
      seekdate: datetime.format(props.odsDatesy, "yyyy-MM-dd"),
      dispalyIsYs: {
        label: "设置原生",
        Isys: 1
      }
    };
  }
  componentDidMount() {
    this.props.dispatch({
      type: `${daoName}/setKeyName`,
      payload: { keyName: "ID", permID: this.props.permID }
    });
    this.loadData();
    this.loadOptionData();
  }
  loadData() {
    let date = this.state.seekdate
    const curr = new Date(date)
    const edate = new Date(curr.getFullYear(), curr.getMonth() + 1, 0)
    date = datetime.format(edate, "yyyy-MM-dd")
    const dispatch = this.props.dispatch
    const form = this.refs.whForm.getForm();
    let fw = '1'
    form.validateFields((err, values) => {
      fw = values.FW
    });
    compDiviService.InsertListDate({ date }
    ).then(function () {
      let seeks = [];
      let whereItems = [];
      let WhereCauses = [];
      if (fw === '1') {
        whereItems.push({
          FieldName: "DTID",
          Operator: "=",
          FieldValues: date
        }, {
          FieldName: "KHJG",
          Operator: "notlike",
          FieldValues: '无锡'
        }, {
          FieldName: "KHJG",
          Operator: "notlike",
          FieldValues: '南通'
        });
      } else if (fw === '2') {
        whereItems.push({
          FieldName: "DTID",
          Operator: "=",
          FieldValues: date
        }, {
          FieldName: "KHJG",
          Operator: "like",
          FieldValues: '无锡'
        });
      } else {
        whereItems.push({
          FieldName: "DTID",
          Operator: "=",
          FieldValues: date
        }, {
          FieldName: "KHJG",
          Operator: "like",
          FieldValues: '南通'
        });
      }
      WhereCauses.push({
        WhereItems: whereItems,
        RelationSign: "AND"
      })
      seeks = WhereCauses;
      let sorter = {
        field: 'KHRQ',
        order: 'descend'
      }
      dispatch({
        type: `${daoName}/fetch`,
        payload: { daoName, pageSize: 20, seeks, sorter }
      });
    })
  }
  loadOptionData() {
    let options = []
    controls.map(c => {
      if (c.fetch) {
        let f = c.fetch;
        if (c.type === 'cascader-select') {
          f.isCascader = true;
        }
        if (c.type !== 'search') {
          options.push(f);
        }
      }
    })
    if (daoName && options.length > 0) {
      this.props.dispatch({ type: `${daoName}/fetchOptions`, payload: { options } });
    }
  }
  // llwh() {//利率维护
  //   let len = this.props.selectedRowKeys.length;
  //   let key = this.props.selectedRowKeys;
  //   if (len === 0) {
  //     message.info('请选择要维护数据行！');
  //     return;
  //   }
  //   let isOK = true;
  //   const form = this.refs.whForm.getForm();
  //   let ll = 0;
  //   form.validateFields((err, values) => {
  //     if (!err) {
  //       if (values.LL === undefined || values.LL === '') {
  //         message.info('请填入利率值！');
  //         isOK = false;
  //       }
  //       ll = parseFloat(values.LL);
  //     }
  //   });
  //   if (!isOK) {
  //     return;
  //   }
  //   let acid = key[0];
  //   const row = this.props.list.find(row => row.ID === acid)
  //   const date = this.state.seekdate
  //   const dispatch = this.props.dispatch
  //   Modal.confirm({
  //     title: '提示',
  //     content: `请确认给【${row.KHMC}】维护利率？`,
  //     okText: '确定',
  //     cancelText: '取消',
  //     onOk: () => {
  //       compDiviService.UpdateCompAccoInrt({ acid, ll, date }
  //       ).then(function (data) {
  //         if (data === 'OK') {
  //           message.success('利率维护成功！')
  //           const form = this.refs.whForm.getForm();
  //           form.resetFields();
  //           this.loadData();
  //         } else {
  //           return;
  //         }
  //       }.bind(this)).catch(function (ex) {
  //         console.log('请求出错', ex)
  //       });
  //     }
  //   });
  // }
  szys(isys) {//设置原生派生
    let date = ''
    let odsdate = datetime.format(this.props.odsDatesy, "yyyy-MM-dd")
    const form = this.refs.whForm.getForm();
    form.validateFields((err, values) => {
      if (!values.YF) {
        date = odsdate
      } else {
        date = values.YF.get('year') + '-' + (values.YF.get('month') + 1) + '-' + values.YF.get('date')
      }
    })
    let len = this.props.selectedRowKeys.length;
    let key = this.props.selectedRowKeys;
    const rows = this.state.diviList;
    if (len === 0) {
      message.info('请选择数据行！');
      return;
    }
    let acids = key.join(",");
    const loadData = this.loadData.bind(this)
    Modal.confirm({
      title: '提示',
      content: `请确认设置选中的账户为【原生】存款？`,
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        compDiviService.SetCompAccoIsys({ acids, isys, date }
        ).then(function (data) {
          if (data === 'OK') {
            message.success('设置成功！')
            loadData()
          } else {
            return;
          }
        }).catch(function (ex) {
          console.log('请求出错', ex)
        });
      }
    });
  }
  szps(isys) {//设置原生派生
    let date = ''
    let odsdate = datetime.format(this.props.odsDatesy, "yyyy-MM-dd")
    const form = this.refs.whForm.getForm();
    form.validateFields((err, values) => {
      if (!values.YF) {
        date = odsdate
      } else {
        date = values.YF.get('year') + '-' + (values.YF.get('month') + 1) + '-' + values.YF.get('date')
      }
    })
    let len = this.props.selectedRowKeys.length;
    let key = this.props.selectedRowKeys;
    const rows = this.state.diviList;
    if (len === 0) {
      message.info('请选择数据行！');
      return;
    }
    let acids = key.join(",");
    const loadData = this.loadData.bind(this)
    Modal.confirm({
      title: '提示',
      content: `请确认设置选中的账户为【派生】存款？`,
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        compDiviService.SetCompAccoIsys({ acids, isys, date }
        ).then(function (data) {
          if (data === 'OK') {
            message.success('设置成功！')
            loadData()
          } else {
            return;
          }
        }).catch(function (ex) {
          console.log('请求出错', ex)
        });
      }
    });
  }
  findList() {
    let date = ""
    const form = this.refs.whForm.getForm();
    form.validateFields((err, values) => {
      if (!values.YF) {
        date = datetime.format(this.props.odsDatesy, "yyyy-MM-dd")
      } else {
        date = values.YF.get('year') + '-' + (values.YF.get('month') + 1) + '-' + values.YF.get('date')
      }
    });
    this.state.seekdate = date
    this.loadData()
  }
  render() {
    let { showEdit, record, permID, selectedRowKeys, popedomTypes, odsDatesy, odsDate } = this.props;
    let date = this.state.seekdate
    const pTypes = popedomTypes[permID]
    let data = []
    const controlsFilter = [
      { name: 'YF', required: false, type: 'month', label: '月份', dataType: 'date', grid: 4 / 24 },

      {
        name: 'FW', required: false, type: 'select', label: '数据范围', grid: 5 / 24,
        data: [{ value: '1', label: '南京分行' }, { value: '2', label: '无锡分行' }, { value: '3', label: '南通分行' }],
        layout: { labelSpan: 8, wrapperSpan: 14 } //onChange: this.SelDivi.bind(this),
      },

      {
        name: 'button', required: false, type: 'button-group',
        data: [
          { value: '3', label: "查询", onClick: this.findList.bind(this) },
          { value: '2', label: "设置原生", onClick: this.szys.bind(this, true) },
          { value: '4', label: "设置派生", onClick: this.szps.bind(this, false) }], grid: 10 / 24,
        layout: { labelSpan: 8, wrapperSpan: 16 }
      },

    ]
    // if (pTypes.indexOf('D') !== -1) {
    //   let button = { value: '1', label: '利率维护', onClick: this.llwh.bind(this) }
    //   data.push(button)
    //   let controlsFilter1 = [
    //     { name: 'LL', required: false, type: 'input-number-min0', label: '利率', grid: 3 / 24, layout: { labelSpan: 9, wrapperSpan: 15 } },
    //     {
    //       name: 'CX', required: false, type: 'button-group',
    //       data: data, grid: 6 / 24,
    //       layout: { labelSpan: 5, wrapperSpan: 16 }
    //     }
    //   ]
    //   controlsFilter = controlsFilter1
    // }
    // if (pTypes.indexOf('S') !== -1) {
    //   let button2 = { value: '3', label: "查询", onClick: this.findList.bind(this) }
    //   data.push(button2)
    //   let button1 = { value: '2', label: "设置原生", onClick: this.szys.bind(this, true) }
    //   data.push(button1)
    //   let button3 = { value: '4', label: "设置派生", onClick: this.szys.bind(this, false) }
    //   data.push(button3)
    //   let controlsFilter1 = [
    //     { name: 'YF', required: false, type: 'month', label: '月份', grid: 6 / 24, dataType: 'date' },
    //     {
    //       name: 'CX', required: false, type: 'button-group',
    //       data: data, grid: 6 / 24,
    //       layout: { labelSpan: 5, wrapperSpan: 16 }
    //     }
    //   ]
    //   controlsFilter = controlsFilter1
    // }
    // if (pTypes.indexOf('S') !== -1 && pTypes.indexOf('D') !== -1) {
    //   controlsFilter = [
    //     { name: 'YF', required: false, type: 'month', label: '月份', dataType: 'date', grid: 4 / 24 },
    //     {
    //       name: 'CX', required: false, type: 'button-group',
    //       data: [{ value: '3', label: "查询", onClick: this.findList.bind(this) }], grid: 2 / 24,
    //       layout: { labelSpan: 0, wrapperSpan: 24 }
    //     },
    //     // { name: 'LL', required: false, type: 'input-number-min0', label: '利率', grid: 4 / 24, layout: { labelSpan: 15, wrapperSpan: 9 } },
    //     {
    //       name: 'llwh', required: false, type: 'button-group',
    //       data: [{ value: '2', label: "设置原生", onClick: this.szys.bind(this, true) }, { value: '4', label: "设置派生", onClick: this.szps.bind(this, false) }], grid: 6 / 24,
    //       layout: { labelSpan: 5, wrapperSpan: 16 }
    //     },
    //   ]
    // }

    // { name: 'LL', required: false, type: 'input-number-min0', label: '利率', grid: 4 / 24, layout: { labelSpan: 15, wrapperSpan: 9 } },
    // {
    //   name: 'llwh', required: false, type: 'button-group',
    //   data: [{ value: '2', label: "设置原生", onClick: this.szys.bind(this, true) }, { value: '4', label: "设置派生", onClick: this.szps.bind(this, false) }], grid: 6 / 24,
    //   layout: { labelSpan: 5, wrapperSpan: 16 }
    // },
    const seekRecord = { YF: date, FW: '1' }
    return (
      <div className={styles.normal} style={{ background: '#fff', marginTop: -16, padding: '5px 5px' }}>
        <div>
          <div className={styles.create}>
            <EditFrom ref="whForm" daoName={daoName} controls={controlsFilter} clearItemMargin={true} selectFirst={false} record={seekRecord} />
          </div>
          <DataTable ref="DgckTable" daoName={daoName} columns={columns} controls={controls} permID={permID} multiSelect={true} />
        </div>
      </div>
    )
  }
}
function mapStateToProps(state) {
  const { showEdit, record, selectedRowKeys, keyName, list } = state[daoName];
  const { userID, orgID, pOrgID, popedomTypes, odsDate, odsDatesy } = state.menus;
  return {
    showEdit,
    selectedRowKeys,
    keyName,
    record,
    popedomTypes,
    odsDate, list, odsDatesy
  }
}
COMP_ACCO = connect(mapStateToProps)(COMP_ACCO)
export default COMP_ACCO;
let render = (props) => React.createElement(COMP_ACCO, props);
let f = new Factory()
f.set("COMP_ACCO", render)